<!DOCTYPE html>
<html>
<head>
    <title>论文格式检测系统</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }

        .upload-box {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
        }

        .progress-bar {
            height: 20px;
            background: #eee;
            margin: 10px 0;
            border-radius: 10px;
        }

        .progress {
            height: 100%;
            width: 0%;
            background: #4CAF50;
            transition: width 0.3s;
            border-radius: 10px;
        }

        .button {
            padding: 10px 20px;
            background: #2196F3;
            color: white;
            border: none;
            cursor: pointer;
        }

        .button:disabled {
            background: #ccc;
        }

        .error-list {
            margin-top: 20px;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }

        .error-item {
            padding: 10px;
            margin: 5px 0;
            background: #ffebee;
        }

        /* 添加加载动画样式 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        .button .loading {
            width: 16px;
            height: 16px;
            border-width: 2px;
            margin-right: 8px;
            vertical-align: text-top;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 文件上传区域 -->
    <div class="upload-box">
        <h2>毕业论文格式检测</h2>
        <input type="file" id="fileInput" accept=".docx,.pdf">
        <button class="button" onclick="uploadFile()">上传文件</button>
        <div class="progress-bar">
            <div class="progress" id="uploadProgress"></div>
        </div>
        <p id="uploadStatus"></p>
    </div>

    <!-- 功能按钮 -->
    <div style="margin: 20px 0;">
        <button class="button" id="analyzeBtn" onclick="analyzeFile()" disabled>分析格式</button>
        <button class="button" id="calibrateBtn" onclick="calibrateFile()" disabled>校准格式</button>
        <a class="button" id="downloadBtn" style="display: none;">下载校准文件</a>
    </div>

    <!-- 结果展示 -->
    <div id="resultPanel" style="display: none;">
        <h3>检测结果</h3>
        <div id="structureInfo"></div>
        <div class="error-list" id="errorList"></div>
    </div>
</div>

<script>
    let currentFileId = null;
    let calibratedFileId = null;

    // 文件上传处理
    function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];
        if (!file) return alert('请选择文件');

        const formData = new FormData();
        formData.append('file', file);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/upload');

        // 上传进度处理
        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                const percent = (e.loaded / e.total) * 100;
                document.getElementById('uploadProgress').style.width = percent + '%';
                document.getElementById('uploadStatus').textContent =
                    `上传中：${Math.round(percent)}%`;
            }
        };

        xhr.onload = function () {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                currentFileId = response.data.fileId;
                document.getElementById('analyzeBtn').disabled = false;
                document.getElementById('uploadStatus').textContent = '上传成功';
            } else {
                alert('上传失败: ' + xhr.statusText);
            }
        };

        xhr.send(formData);
    }

    // 格式分析处理
    // 修改后的分析格式处理函数
    function analyzeFile() {
        if (!currentFileId) return;

        const analyzeBtn = document.getElementById('analyzeBtn');

        // 添加加载状态
        analyzeBtn.disabled = true;
        analyzeBtn.innerHTML = `<span class="loading"></span> 分析中...`;

        fetch('/api/analyze', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({fileId: currentFileId})
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    showAnalysisResult(data.data);
                    document.getElementById('calibrateBtn').disabled = false;
                    document.getElementById('resultPanel').style.display = 'block';
                }
            })
            .catch(error => console.error('分析出错:', error))
            .finally(() => {
                // 恢复按钮状态
                analyzeBtn.disabled = false;
                analyzeBtn.innerHTML = "分析格式";
            });
    }

    // 显示分析结果
    function showAnalysisResult(data) {
        // 显示结构信息
        document.getElementById('structureInfo').innerHTML = `
                <p>标题层级：${data.structure.titleStatus}</p>
                <p>章节完整性：${data.structure.chapterIntegrity}%</p>
            `;

        // 显示错误列表
        const errorList = data.errors.map(error => `
                <div class="error-item">
                    <strong>${error.type}</strong>
                    <p>${error.description} (页码：${error.page})</p>
                </div>
            `).join('');
        document.getElementById('errorList').innerHTML = errorList;
    }

    // 格式校准处理
    // 修改后的格式校准处理函数
        function calibrateFile() {
            const calibrateBtn = document.getElementById('calibrateBtn');

            // 添加加载状态
            calibrateBtn.disabled = true;
            calibrateBtn.innerHTML = `<span class="loading"></span> 校准中...`;

            fetch('/api/calibrate', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({fileId: currentFileId})
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    calibratedFileId = data.data.calibratedId;
                    const downloadBtn = document.getElementById('downloadBtn');
                    downloadBtn.href = `/api/download/${calibratedFileId}`;
                    downloadBtn.style.display = 'inline-block';
                }
            })
            .catch(error => {
                console.error('校准失败:', error);
                alert('格式校准失败，请重试');
            })
            .finally(() => {
                // 恢复按钮状态
                calibrateBtn.disabled = false;
                calibrateBtn.innerHTML = "校准格式";
            });
        }
</script>
</body>
</html>